<template>
  <div id="chart-main" class="main-index" ref="main">
    <div class="main_grid">
		<vue-particles
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
      <div class="main_top"></div>
      <div class="main_con">
        <div class="main_top_left">
          <div class="frame-top"></div>
          <div class="frame-right1"></div>
          <div class="frame-right2"></div>
          <div class="frame-bottom"></div>
          <vue-seamless-scroll
            v-if="updateTalentlist"
            :data="talentlist"
            :class-option="optionSingleHeight"
            class="seamless-warp"
            style="padding: 1%"
          >
            <ul class="talentlist">
              <li v-for="(item, index) in talentlist" :key="index">
                <Row :gutter="8" target="_blank" class="talents-list">
                  <Col span="6" class="name">{{ item.name }}</Col>
                  <Col span="4" class="country">{{ item.country }}</Col>
                  <Col span="5" class="subject">{{ item.subject }}</Col>
                  <Col span="5" class="level">{{ item.level }}</Col>
                  <Col span="4" class="chinese">{{ item.chinese }}</Col>
                </Row>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
        <div class="chart-map">
          <chart-world-map
            v-if="mapData.length > 0"
            :value="mapData"
            style="height: 100%; width: 100%"
          ></chart-world-map>
        </div>
        <transition
          enter-active-class="animate__animated animate__fadeInDown animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutUp animate__delay-0.1s"
        >
          <div
            ref="boxshow"
            :class="{ 'main-center-left': true }"
            v-show="boxshow"
          >
            <div class="border-top"></div>
            <div class="border-bottom"></div>
            <div class="modal-block">
              <table class="modal-table">
                <thead>
                  <tr>
                    <th>模块</th>
                    <th>层次</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>全球人才分布地图</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="mapLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="changeModal(mapLevelValue, 'Map')"
                      >
                        <Option value="all">全部人才</Option>
                        <!-- <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option> -->
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                  <tr>
                    <td>全球人才国家分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="allCityLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="changeModal(allCityLevelValue, 'allCity')"
                      >
                        <Option value="all">全部人才</Option>
                        <!-- <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option> -->
                        <Option value="100">前100名</Option>
												<Option value="1000">前1000名</Option>
												<Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                  <tr>
                    <td>全球人才学科分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="allSubjectLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="
                          changeModal(allSubjectLevelValue, 'allSubject')
                        "
                      >
                        <Option value="all">全部人才</Option>
                        <!-- <!-- <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option> --> -->
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                  <tr>
                    <td>中国人才学科分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="chinaSubjectLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="
                          changeModal(chinaSubjectLevelValue, 'chinaSubject')
                        "
                      >
                        <Option value="all">全部人才</Option>
                        <!-- <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option> -->
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                  <tr>
                    <td>中国人才城市分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="chinaCityLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="
                          changeModal(chinaCityLevelValue, 'chinaCity')
                        "
                      >
                        <Option value="all">全部人才</Option>
                        <!-- <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option> -->
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                  <tr>
                    <td>CA+指数人才分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="caLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="changeModal(caLevelValue, 'CA+')"
                      >
                        <!-- <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option> -->
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                  <tr>
                    <td>H++指数人才分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="hLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="changeModal(hLevelValue, 'H++')"
                      >
                        <!-- <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option> -->
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                  <tr>
                    <td>G指数人才分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="gLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="changeModal(gLevelValue, 'G')"
                      >
                        <!-- <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option> -->
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </transition>
        <div class="main-bottom-left">
          <div class="select-modal" style="margin-right:1%">
            <Select
              transfer-class-name="select-transfer"
              v-model="allCityLevelValue"
              transfer
              placeholder="选择人才层次"
              @on-change="changeModal(allCityLevelValue, 'allCity')"
            >
              <Option value="all">全部人才</Option>
             <!-- <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option> -->
              <Option value="100">前100名</Option>
							<Option value="1000">前1000名</Option>
							<Option value="10000">前10000名</Option>
            </Select>
          </div>
          <chart-bar
            :value="Object.values(allCity)"
            text="全球人才国家分布"
            :xAxis="{ data: Object.keys(allCity),axisLabel: {textStyle: { color: '#7FA8FF' }, interval:0,rotate:allCityLevelValue!='all' ? 45 : 0}}"
			:yAxis="{axisLabel: { show:false }}"
            :series="chartpie1Series"
			:tooltip="{formatter:function(params){
				return params.name+'<br/>'+params.seriesName+':'+Math.round(Math.pow(params.value,4));
			}}"
			:grid="{ left: 0, right: '1%' }"
            style="height: 100%; width: 100%"
          ></chart-bar>
        </div>
        <div class="main-top-right">
          <div class="select-modal">
            <Select
              transfer-class-name="select-transfer"
              v-model="allSubjectLevelValue"
              transfer
              placeholder="选择人才层次"
              @on-change="changeModal(allSubjectLevelValue, 'allSubject')"
            >
              <Option value="all">全部人才</Option>
             <!-- <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option> -->
              <Option value="100">前100名</Option>
              <Option value="1000">前1000名</Option>
              <Option value="10000">前10000名</Option>
            </Select>
          </div>
          <chart-bar
            :value="Object.values(allSubject).slice(0, 5).reverse()"
            text="全球人才学科分布"
            style="height: 100%; width: 100%"
            :xAxis="{ type: 'value' }"
            :yAxis="{
              type: 'category',
              axisLabel: { inside: true, textStyle: { color: '#fff' } },
              data: Object.keys(allSubject).slice(0, 5).reverse(),
            }"
            :series="chartpie2Series"
            :grid="{ left: '2%', right: '2%' }"
          ></chart-bar>
        </div>
        <div class="main-center-right">
          <div class="select-modal">
            <Select
              transfer-class-name="select-transfer"
              v-model="chinaSubjectLevelValue"
              transfer
              placeholder="选择人才层次"
              @on-change="changeModal(chinaSubjectLevelValue, 'chinaSubject')"
            >
              <Option value="all">全部人才</Option>
             <!-- <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option> -->
              <Option value="100">前100名</Option>
              <Option value="1000">前1000名</Option>
              <Option value="10000">前10000名</Option>
            </Select>
          </div>
          <chart-bar
            :value="Object.values(chinaSubject).slice(0, 5).reverse()"
            text="中国人才学科分布"
            style="height: 100%; width: 100%"
            :xAxis="{ type: 'value' }"
            :yAxis="{
              type: 'category',
              axisLabel: { inside: true, textStyle: { color: '#fff' } },
              data: Object.keys(chinaSubject).slice(0, 5).reverse(),
            }"
            :series="chartpie3Series"
            :grid="{ left: '2%', right: '2%' }"
          ></chart-bar>
        </div>
        <div class="main-bottom-right">
          <div class="select-modal">
            <Select
              transfer-class-name="select-transfer"
              v-model="chinaCityLevelValue"
              transfer
              placeholder="选择人才层次"
              @on-change="changeModal(chinaCityLevelValue, 'chinaCity')"
            >
              <Option value="all">全部人才</Option>
             <!-- <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option> -->
              <Option value="100">前100名</Option>
              <Option value="1000">前1000名</Option>
              <Option value="10000">前10000名</Option>
            </Select>
          </div>
          <chart-bar
            :value="Object.values(chinaCity)"
            text="中国人才城市分布"
            :xAxis="{ data: Object.keys(chinaCity) }"
            style="height: 100%; width: 100%"
            :grid="{ left: '2%', right: '2%' }"
          ></chart-bar>
        </div>
        <div class="main-bottom-center">
          <div class="frame-top-2" style="height: 6%"></div>
          <div class="frame-bottom" style="height: 6%"></div>
          <div class="panel" @click="boxshow = !boxshow">
            <Icon type="ios-paper-outline" size="24" />
          </div>
          <Row style="height: 100%">
            <Col span="8" style="height: 100%">
              <div class="chart-pie-border-1"></div>
              <div class="chart-pie-border-3"></div>
              <chart-pie
                text="CA+指数"
                subtext="人才分布"
                :value="CA.slice(0, 5)"
                style="height: 100%; width: 100%"
              />
            </Col>
            <Col span="8" style="height: 100%">
              <div class="chart-pie-border-2"></div>
              <div class="chart-pie-border-3"></div>
              <chart-pie
                text="H++指数"
                subtext="人才分布"
                :value="H.slice(0, 5)"
                style="height: 100%; width: 100%"
              />
            </Col>
            <Col span="8" style="height: 100%">
              <div class="chart-pie-border-4"></div>
              <div class="chart-pie-border-3"></div>
              <chart-pie
                text="G指数"
                subtext="人才分布"
                :value="G.slice(0, 5)"
                style="height: 100%; width: 100%"
              />
            </Col>
          </Row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CountTo from '_c/count-to'
import vueSeamlessScroll from 'vue-seamless-scroll'
import './css/index.css'
import { ChartWorldMap, ChartBar, ChartPie } from './charts'
import chartData from './data/chartdata.json'
import talentlist from './data/talent_list.json'
export default {
  components: {
    CountTo,
    vueSeamlessScroll,
    ChartWorldMap,
    ChartBar,
    ChartPie
  },
  data () {
    return {
      updateTalentlist: true,
      boxshow: false,
      mapLevelValue: 'all',
      allSubjectLevelValue: 'all',
      allCityLevelValue: 'all',
      chinaSubjectLevelValue: 'all',
      chinaCityLevelValue: 'all',
      caLevelValue: '1%',
      hLevelValue: '1%',
      gLevelValue: '1%',
      levelList: [
        { label: '前1%', value: '1%' },
        { label: '前15%', value: '15%' },
        { label: '前100', value: '100' },
        { label: '前1000', value: '1000' },
        { label: '前10000', value: '10000' }
      ],
      chartList: [
        '地图',
        '全球学者学科人才分布',
        '中国学者学科人才分布',
        '中国学者城市分布',
        'CA+指数人才分布',
        'H++指数人才分布',
        'G指数人才分布'
      ],
      chartpie3Series: [
        {
          label: { show: false },
          barCategoryGap: '60%',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 1, color: 'rgb(54 214 210)' },
                { offset: 0, color: 'rgb(18 44 50 / 50%)' }
              ],
              globalCoord: false
            }
          }
        }
      ],
      chartpie2Series: [
        {
          label: { show: false },
          barCategoryGap: '60%',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: 'rgba(122, 66, 137, 0.52)' },
                { offset: 1, color: 'rgba(221, 61, 108, 1)' }
                // { offset: 0, color: 'rgba(101, 75, 21, 0.5)'},
                // { offset: 1, color: 'rgba(254, 191, 61)' }
              ],
              globalCoord: false
            }
          }
        }
      ],
      chartpie1Series: [
        {
          label: { show: false },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgb(153 103 255)' },
                { offset: 1, color: 'rgb(37 21 66 / 50%)' }
              ],
              globalCoord: false
            }
          }
        }
      ],
      mapData: [],
      allSubject: [],
      chinaSubject: [],
      allCity: [],
      chinaCity: [],
      CA: [],
      H: [],
      G: [],
      chartData: {},
      talentlist: [],
      mainTop: false
    }
  },
  created () {
    var that = this
    that.talentlist = that.getRandomArrayElements(talentlist, 100)
    setInterval(function () {
      // that.updateTalentlist = false
      that.$nextTick(() => {
        that.talentlist = that.getRandomArrayElements(talentlist, 100)
        // that.updateTalentlist = true
      })
    }, 60000)
    this.chartData = chartData
    this.mapData = chartData['Map']['all']
    this.allSubject = chartData['allSubject']['all']
    this.chinaSubject = chartData['chinaSubject']['all']
    this.allCity = chartData['allCity']['all']
    this.chinaCity = chartData['chinaCity']['all']
    this.CA = chartData['CA+']['1%']
    this.H = chartData['H++']['1%']
    this.G = chartData['G']['1%']
  },
  mounted () {
    var w = document.documentElement.clientWidth || document.body.clientWidth
    var h = document.documentElement.clientHeight || document.body.clientHeight

    if (w < h) {
      var transform =
        'scale(' +
        w / 1080 +
        ',' +
        h / 1920 +
        ') rotate(90deg) translate(0px, -' +
        1080 +
        'px)'
    } else {
      var transform = 'scale(' + w / 1920 + ',' + h / 1080 + ')'
    }
    this.$refs.main.style.transform = transform
  },
  computed: {
    optionSingleHeight () {
      return {
        // singleHeight: 31.5,
        step: 0.3
      }
    }
  },
  methods: {
    changeModal (value, modal) {
      if (modal == 'Map') {
        this.mapData = chartData['Map'][value]
      } else if (modal == 'allSubject') {
        this.allSubject = chartData['allSubject'][value]
      } else if (modal == 'chinaSubject') {
        this.chinaSubject = chartData['chinaSubject'][value]
      } else if (modal == 'allCity') {
        this.allCity = chartData['allCity'][value]
      } else if (modal == 'chinaCity') {
        this.chinaCity = chartData['chinaCity'][value]
      } else if (modal == 'CA+') {
        this.CA = chartData['CA+'][value]
      } else if (modal == 'H++') {
        this.H = chartData['H++'][value]
      } else if (modal == 'G') {
        this.G = chartData['G'][value]
      }
    },
    getRandomArrayElements (arr, count) {
      var shuffled = arr.slice(0),
        i = arr.length,
        min = i - count,
        temp,
        index
      while (i-- > min) {
        index = Math.floor((i + 1) * Math.random())
        temp = shuffled[index]
        shuffled[index] = shuffled[i]
        shuffled[i] = temp
      }
      return shuffled.slice(min)
    }
  },
  beforeCreate () {
    document.querySelector('body').setAttribute('style', 'overflow:hidden')
  },
  // 销毁前清除
  beforeDestroy () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style scoped="scoped">
#chart-main >>> .count-to-wrapper .content-outer {
  display: block;
  text-align: center;
}

#chart-main >>> .ivu-select {
  font-size: 12px;
  color: #fff;
}

#chart-main >>> .ivu-select-single .ivu-select-selection {
  height: 26px;
  border-radius: 0px;
  background-color: transparent;
  border-color: transparent;
}

#chart-main
  >>> .ivu-select-single
  .ivu-select-selection
  .ivu-select-placeholder {
  height: 24px;
  line-height: 24px;
}

#chart-main
  >>> .ivu-select-single
  .ivu-select-selection
  .ivu-select-selected-value {
  height: 24px;
  line-height: 24px;
}

.select-modal >>> .ivu-select-single .ivu-select-selection {
  border-color: #33629f !important;
}
</style>

<style>
.seamless-warp {
  height: 100%;
  overflow: hidden;
}

.index-count-class {
  display: inline !important;
  margin-top: 0 !important;
}

.index-unit-class {
  color: white;
}

.select-transfer {
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid #33629f;
}

.select-transfer .ivu-select-item {
  color: #fff;
}

.select-transfer .ivu-select-item-selected,
.ivu-select-item-selected:hover {
  color: #adc4ff;
}

.select-transfer .ivu-select-item:hover {
  color: #fff;
  background-color: rgba(88, 125, 221, 1);
}

.select-transfer .ivu-select-item-focus {
  color: #fff;
  background-color: rgba(88, 125, 221, 1);
}

.select-transfer::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
  background-color: transparent !important;
}

.select-transfer::-webkit-scrollbar-thumb {
  background-color: rgba(35, 66, 130, 0.6) !important;
  border-radius: 4px !important;
  background-clip: unset !important;
  border-width: 0 !important;
}
</style>
